<template>
    <div>
        <!--<h2>电影页面</h2>-->

        <!--实现轮播图的效果-->
        <!--https://github.com/surmon-china/vue-awesome-swiper-->

        <swiper ref="mySwiper" :options="swiperOptions">
            <swiper-slide class="slide-item">
                <img src="/banners/1.jpg" alt="">
            </swiper-slide>
            <swiper-slide class="slide-item">
                <img src="/banners/2.jpg" alt="">
            </swiper-slide>
            <swiper-slide class="slide-item">
                <img src="/banners/3.jpg" alt="">
            </swiper-slide>
            <!--<div class="swiper-pagination" slot="pagination"></div>-->
        </swiper>

        <!--完成选项卡-->
        <ul class="tabs">
            <li class="tabs-item" :class="{active: currentItem == 'hoting'}" @click="tabHandler('hoting')">正在热映</li>
            <li class="tabs-item" :class="{active: currentItem == 'coming'}" @click="tabHandler('coming')">即将上映</li>
        </ul>

        <!--动态组件-->
        <!--<component is=""></component>-->

        <!--显示对应的列表-->
        <!--列表组件-->
        <!--列表组件和 loading组件是互斥的-->
        <ul class="list" v-if="movieStatus">
            <li class="list-item" v-for="ele in Moives">
                <img :src="ele.poster">
                <div>
                    <h3>{{ ele.name }}</h3>
                    <p>主演：{{ ele.actors | filterActors }}</p>
                    <p>上映时间：{{ ele.premiereAt }}</p>
                </div>
                <span class="prebug">
                    预购
                </span>
            </li>

        </ul>

        <Loading v-else/>

        <Nav/>
    </div>
</template>

<script>
    import Nav from '../../components/Nav/index.vue'
    import {Swiper, SwiperSlide, directive} from 'vue-awesome-swiper'
    import 'swiper/css/swiper.css'
    import {getHotingMovie, getComingMovie} from '../../api/movie.js'

    // 优化：希望在加载电影的数据，在数据还没有返回之前，页面出现一个loading的加载小动画。等信息加载回来后，然后在隐藏该动画
    // https://www.cnblogs.com/jr1993/p/4622039.html
    import Loading from '../../components/Loading'

    // import Loading from "@components/loading.vue"
    export default {
        data() {
            return {
                currentItem: 'hoting',
                hotMoives: [],
                comingMoives: [],
                movieStatus: false, // 代表当前的前言信息是否从服务器已经返回的状态。

                Moives: [], // 因为 正在热映和即将上映使用的组件是同一个组件，只是数据源不一样，那么定义同一个模型变量，在用户点击切换的时候，把不用的数据赋值给当前的 movies 即可。
                swiperOptions: {
                    pagination: {
                        el: '.swiper-pagination'
                    },
                }
            }
        },
        computed: {
            swiper() {
                return this.$refs.mySwiper.$swiper
            }
        },
        created() {
            this.movieStatus = false;

            getHotingMovie().then(response => {
                console.log('hoting', response);
                this.Moives = response.data.data.films;
                this.movieStatus = true;

            });
        },
        mounted() {
            console.log('Current Swiper instance object', this.swiper)
            this.swiper.slideTo(0, 1000, false)
        },
        name: "index",
        components: {
            Nav,
            Swiper,
            SwiperSlide,
            Loading
        },
        directives: {
            swiper: directive
        },
        methods: {
            tabHandler(type) {
                //1.  需要使用一个模型变量来记录用户当前记录的是哪个按钮，需要根据点击的哪个按钮来决定是否增加 active 类名
                // 2. 根据用户的点击操作，和后台进行接口的联调，获取对应的电影的列表数据信息
                // 抓取卖座的数据包得出电影接口
                // juhe.cn 网站

                if (type == 'hoting') {
                    this.currentItem = 'hoting'
                    this.movieStatus = false;

                    getHotingMovie().then(response => {
                        console.log('hoting', response);
                        this.Moives = response.data.data.films;
                        this.movieStatus = true;
                    });

                } else if (type == 'coming') {
                    this.currentItem = 'coming'
                    this.movieStatus = false;

                    getComingMovie().then(response => {
                        console.log('coming', response);
                        this.Moives = response.data.data.films;
                        this.movieStatus = true;
                    });

                }

            }
        },
        filters: {
            // 局部过滤器
            filterActors: function (input) {
                // let rs = '';
                let rs = [];
                input.forEach(item => {
                    // rs += ' | ' +  item.name;
                    rs.push(item.name);

                });
                return rs.join(' | ').substr(0, 7) + '...';
            }
        }
    }
</script>

<style scoped lang="less">
    .slide-item {

        /*height: 50px;*/
        /*background-color: #ccc;*/

        img {
            max-width: 100%;
        }

    }

    .tabs {
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;
        margin-top: 10px;
        /* .tabs .atcve*/

        .tabs-item {
            padding-bottom: 8px;
        }

        .active {
            color: #ff5f16;
            border-bottom: 2px solid #ff5f16;

        }

    }

    .list {
        .list-item {
            padding: 10px;

            img {
                width: 66px;

            }

            .prebug {
                display: inline-block;
                width: 30px;
                height: 30px;
                text-align: center;
                line-height: 30px;
                border: 1px solid red;
            }

            display: flex;
            width: 100%;
            /*flex: 1;*/
            justify-content: space-around;
            align-items: center;
        }
    }
</style>